<template>
  <div id="app">
    <myHead v-if="this.$route.meta.tabbar"></myHead>
    <transition name="fade" mode="out-in"><!--<transition>标签让路由有过渡动画,-->
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import myHead from "./components/com_head";
export default {
  name: "App",
  components: { myHead },
  mounted: function() {
    this.$nextTick(() => {
      let appHeight = $("#app").height();
      let windowsHeight = $(window).height();
      if (appHeight < windowsHeight) {
        $("#app").height(windowsHeight);
      } else {
        $("#app").height("100%");
      }
    });
    
    if (session.get("session_user") && this.$websocket.isReConnect) {
    	this.$websocket.connect();
    }
  }
};
</script>

<style>
#app {
  width: 100%;
  min-width: 1360px;
  background: #f2f2f2;
  float: left;
  overflow-y: auto;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.3s;
}
</style>
